import React from 'react'
import { Route, Switch, Redirect }  from 'react-router-dom'

// import Collection from '../views/collection'
const Collection = React.lazy(() => import('../views/collection'));

// import About from '../views/about'
const About = React.lazy(() => import('../views/about'));

// import Mood from '../views/mood/mood'
const Mood = React.lazy(() => import('../views/mood/mood'));

// import Article from '../views/article/article'
const Article = React.lazy(() => import('../views/article/article'));

// import Home from '../views/home'
const Home = React.lazy(() => import('../views/home'));

// import Guestbook from '../views/guestbook/guestbook'
const Guestbook = React.lazy(() => import('../views/guestbook/guestbook'));

// import Center from '../views/center/center'
const Center = React.lazy(() => import('../views/center/center'));

// import ArticleDetail from '../views/article/detail'
const ArticleDetail = React.lazy(() => import('../views/article/detail'));


export const menu = [
  { title: '首页', path: '/' },
  { title: '收藏语录', path: '/mood' },
  { title: '文章分享', path: '/article' },
  { title: '百宝箱', path: '/collection' },
  { title: '给我留言', path: '/guestbook' },
  // { title: '关于我们', path: '/about'},
  // { title: '个人中心', path: '/center' },
]

const mapComponents = {
  '/': Home,
  '/mood': Mood,
  '/article': Article,
  '/collection': Collection,
  '/guestbook': Guestbook,
  '/about': About,
  '/center': Center
}

export default function IndexRouter() {
  return (
      <Switch>
        {
          menu.map(item => {
            return <Route path={item.path} component={mapComponents[item.path]} key={item.path} exact></Route>
          })
        }
        <Route path='/article/:id' component={ArticleDetail}></Route>
        <Redirect to='/'></Redirect>
      </Switch>
  )
}
